<template>
  <div class="rev-table">
    <div class="rev-card el-card el-card__body">
      <div class="main-table">
        <vxe-table
          border="inner"
          ref="tableRef"
          keep-source
          height="auto"
          :column-config="{ resizable: true }"
          :row-config="{
            keyField: 'id',
            useKey: true,
            isHover: true,
            isCurrent: true
          }"
          :tree-config="{
            transform: true,
            expandAll: true,
            reserve: true,
            rowField: 'id',
            parentField: 'parent_id'
          }"
          :checkbox-config="{ labelField: 'id' }"
          :scroll-y="{ enabled: true }"
          :data="state.tableData"
        >
          <vxe-column
            field="menu_name"
            title="菜单名称"
            type="checkbox"
            tree-node
            :edit-render="{}"
          >
            <template #default="scope"> {{ scope.row.menu_name }} </template>
          </vxe-column>
          <vxe-column field="permissions" title="permissions" />
          <vxe-column field="menu_order" title="排序" sortable />
        </vxe-table>
      </div>
    </div>
    <div class="bottom-btns">
      <el-button @click="closeDialog()">取消</el-button>
      <el-button type="primary" @click="doSave()">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick, getCurrentInstance } from 'vue'
import { getTableList } from '@/api/basic'
import { getRoleMenu, updateRoleMenu } from '@/api/basic/admin'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  meta: {
    type: Array,
    default: () => []
  },
  onClose: {
    type: Function
  }
})

const tableRef = ref()

const state: any = reactive({
  query: {
    page: 1,
    size: 999
  },
  conditions: {},
  source: 'table/sys_menu.yaml',
  config: {},
  orderBy: '',
  tableData: [],
  order: ''
})

// 获取数据
const getList = async () => {
  const res: any = await getTableList({
    as_dict: true,
    ...state.query,
    conditions: state.conditions,
    source: state.source,
    filter: state.config?.filter,
    order: state.orderBy
  })
  state.tableData = res.data
}

const fetchRoleMenu = async () => {
  getRoleMenu({ role_id: props.data.id }).then(async (res: any) => {
    const checkRows = res.data.map((x: any) => ({ id: Number(x) }))
    await getList()
    nextTick(() => {
      tableRef.value.setCheckboxRow(checkRows, true)
    })
  })
}

const init = () => {
  fetchRoleMenu()
}
init()

const instance = getCurrentInstance() as any
const { proxy } = instance
const closeDialog = (bool?: any) => {
  if (typeof props.onClose === 'function') {
    props.onClose(bool)
  }
  proxy.$parent.$parent.$parent.$parent.$parent.handleClose()
}

const doSave = () => {
  const selects = tableRef.value.getCheckboxRecords()
  // 半选状态
  const halfSelects = tableRef.value.getCheckboxIndeterminateRecords()
  updateRoleMenu({
    role_id: props.data?.id,
    menu_ids: [...halfSelects?.map((r: any) => r.id), ...selects?.map((r: any) => r.id)]
  }).then(() => {
    closeDialog(true)
  })
}
</script>
<style lang="less" scoped>
.rev-table {
  height: 80vh;
  display: flex;
  flex-direction: column;

  .rev-card {
    flex: 1;
    display: flex;
  }
  .main-table {
    flex: 1;
  }
  .bottom-btns {
    text-align: right;
    margin-top: 10px;
  }
}
</style>
